package com.example.app.components


import androidx.compose.foundation.background
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Checkbox
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountBox
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout

@Composable
fun ConstraintLayoutSample() {
    var check by remember {
        mutableStateOf(false)
    }
    // fillMaxWidth()填充宽度
    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
            .background(Color.Red)
    ) {
        // 创建一个引用createRef
        // 创建多个引用createRefs
        // 引用创建完成之后需要和各个控件做关联Modifier.constrainAs()
        val (icon, title, secondlyText, checkBox) = createRefs()

        Icon(
            imageVector = Icons.Default.AccountBox,
            contentDescription = "",
            modifier = Modifier.constrainAs(icon) {
                // 约束条件
                // 让当前元素垂直居中
                // 让其关联到父元素的顶部
                top.linkTo(parent.top)
                // 让其关联到父元素的低部
                bottom.linkTo(parent.bottom)
                // goneMargin 当组件隐藏时是否还保留这个间距
                // margin间距
                start.linkTo(parent.start)
            }
        )
        Text(text = "wsh3038971",
            fontWeight = FontWeight.Bold,
            fontSize = 18.sp,
            color = Color.LightGray,
            modifier = Modifier.constrainAs(title) {
                // 当前组件连接至icon的尾部
                start.linkTo(icon.end, margin = 8.dp)
                top.linkTo(parent.top)

            }
        )
        Text(text = "xyqsdbshxcqs",
            fontWeight = FontWeight.Bold,
            fontSize = 18.sp,
            color = Color.Green,
            modifier = Modifier.constrainAs(secondlyText) {
                start.linkTo(title.start)
                top.linkTo(parent.top)
                bottom.linkTo(parent.bottom)
            }
        )
        Checkbox(
            checked = check,
            onCheckedChange = {
                check = it
            },
            modifier = Modifier.constrainAs(checkBox) {
                // 水平方向
                centerVerticallyTo(parent)
                //  centerTo()横向垂直都能用
                end.linkTo(parent.end, margin = 8.dp)
            }
        )
    }
}

@Preview(
    showSystemUi = true
)
@Composable
fun ConstraintLayoutSamplePreview() {
    ConstraintLayoutSample()
}

